import { Wrapper } from "./style"

export default function Index(props) {
  const randomBgColor = () => {
    const rgbRandom = () => Math.floor(Math.random() * 100 + 200)
    return (
      "rgb(" + rgbRandom() + "," + rgbRandom() + "," + rgbRandom() + "0.2" + ")"
    )
  }

  const { list, pageName } = props
  return (
    <div className="Com">
      <h4>无限滚动</h4>
      <Wrapper>
        <div className="pageName">{pageName}</div>
        <ul className="list">
          {list.map((item) => {
            return (
              <li
                key={item}
                style={{ background: randomBgColor() }}
                className="item"
              >
                {item}
              </li>
            )
          })}
        </ul>
      </Wrapper>
    </div>
  )
}
